<template>
  <div class="files-page">
    <div class="page-header">
      <h1>文件管理</h1>
      <div class="actions">
        <el-button type="primary">上传文件</el-button>
      </div>
    </div>
    
    <div class="page-content">
      <el-row :gutter="20">
        <el-col :span="6" v-for="file in files" :key="file.id">
          <el-card class="file-card">
            <div class="file-icon">📄</div>
            <div class="file-name">{{ file.name }}</div>
            <div class="file-size">{{ file.size }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <div class="navigation">
      <router-link to="/">
        <el-button>返回工作台</el-button>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const files = ref([
  { id: 1, name: 'document.pdf', size: '2.5 MB' },
  { id: 2, name: 'image.jpg', size: '1.2 MB' },
  { id: 3, name: 'video.mp4', size: '15.8 MB' },
  { id: 4, name: 'archive.zip', size: '5.3 MB' }
])

onMounted(() => {
  console.log('文件管理页面已加载')
})
</script>

<style scoped>
.files-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.file-card {
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
}

.file-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.file-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.file-size {
  color: #999;
  font-size: 12px;
}

.navigation {
  text-align: center;
  padding: 20px 0;
}
</style>